<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>身份匹配</title>
       <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
 <script src='../../../CommonTool/commonNetWork.js'></script>
    <script src="../../../script/jquery.js"></script>
    <script src="../../../CommonTool/progress.js"></script>
    <script src="./IdentityCognition.js"></script>
</head>
<style>
      /* .ImageInfoBody{
        max-width:7rem;
        min-width:7rem;
        height: 7rem;
        border: solid 2px rgb(245, 243, 164) ;
    } */
    .ImageInfoBody {
        height: 22vw;
        border: solid 2px rgb(245, 243, 164);
        width: 22vw;
        margin: 0 auto;
    }
    @media (min-width: 1240px) and (orientation: landscape) {
        .row-margin {
                margin-top: 3%;
        }
    }
</style>
<body>
    <header class="aui-bar aui-bar-nav" id="aui-header">
        <div class="aui-pull-left aui-btn" onclick="close_win();">
            <span class="aui-iconfont aui-icon-left"></span>返回
        </div>
        <div class="aui-title">基础-高级-身份认知</div>
    </header>
    <section class="aui-grid ">
       <div class="aui-row row-margin">
            <div class="aui-col-xs-05"></div>
            <div class="aui-col-xs-3" class="container">
                <img src="http://172.16.32.194/social/advanced/1-身份认知/10/1.png" alt="" class="ImageInfoBody" id="img1"  data-name="1" onclick="clickDisappearOther(this)">
                <img src="http://172.16.32.194/commonButton/dong.gif" alt="" id="floatingImage1" class="float-image">
            </div>
            <div class="aui-col-xs-1"></div>
            <div class="aui-col-xs-3" class="container">
                <img src="http://172.16.32.194/social/advanced/1-身份认知/10/3.png" alt="" class="ImageInfoBody" id="img3" data-name="2" onclick="clickDisappearOther(this)">
                <img src="http://172.16.32.194/commonButton/dong.gif" alt="" id="floatingImage2" class="float-image">
            </div>
            <div class="aui-col-xs-1"></div>
            <div class="aui-col-xs-3" class="container">
                <img src="http://172.16.32.194/social/advanced/1-身份认知/10/6.png" alt="" class="ImageInfoBody" id="img3" data-name="3" onclick="clickDisappearOther(this)">
                <img src="http://172.16.32.194/commonButton/dong.gif" alt="" id="floatingImage5" class="float-image">
            </div>
        </div>
        <div class="aui-row">
            <div class="aui-col-xs-05"></div>
            <div class="aui-col-xs-3" class="container">
                <img src="http://172.16.32.194/social/advanced/1-身份认知/10/4.png" alt="" class="ImageInfoBody" id="img3" data-name="2" onclick="clickDisappearOther(this)">
                <img src="http://172.16.32.194/commonButton/dong.gif" alt="" id="floatingImage4" class="float-image">
            </div>
            <div class="aui-col-xs-1"></div>
            <div class="aui-col-xs-3" class="container">
                <img src="http://172.16.32.194/social/advanced/1-身份认知/10/2.png" alt="" class="ImageInfoBody" id="img4" data-name="3" onclick="clickDisappearOther(this)">
                <img src="http://172.16.32.194/commonButton/dong.gif" alt="" id="floatingImage6" class="float-image">
            </div>
            <div class="aui-col-xs-1"></div>
            <div class="aui-col-xs-3" class="container">
                <img src="http://172.16.32.194/social/advanced/1-身份认知/10/5.png" alt="" class="ImageInfoBody" id="img3" data-name="1" onclick="clickDisappearOther(this)">
                <img src="http://172.16.32.194/commonButton/dong.gif" alt="" id="floatingImage3" class="float-image">
            </div>
        </div>
        <div  class="footbar" >
            <p class="barLeft" onclick="toggleMenu()">第十关</p>
            <p class="barCenter">
                <div id="InitialButton" style="float:left;margin-left:4%;" onclick="InitialClick()">
                    <img id="passImg" src="http://172.16.32.194/commonButton/加号.png" alt="">
                </div> 
                    <div id="InitialButton1" style="float:left;margin-left:4%;display: none;" onclick="ShowInitialClick()">
                        <img id="passImg" src="http://172.16.32.194/commonButton/减号.png" alt="">
                    </div> 
                    <div id="InitialButton2" style="float:left; margin-left:3%;display: none;" >
                        <audio src="http://172.16.32.194/promptsound/找一样的.mp3"   id="audioBody"  controls autoplay ></audio>  
                        <img style="width: 2rem;height: 1.6rem;margin-top:12%" src="http://172.16.32.194/commonButton/播放2.png" alt="" onclick="ImgAudioClick()">
                    </div> 
                    <div id="InitialButton3" style="float:left;margin-left:4%;display: none;" >
                        <img id="passImg" src="http://172.16.32.194/commonButton/提示.png" alt="" onclick="TipsClickOther()">
                    </div> 
                    <div id="InitialButton4" style="float:left;margin-left:4%;display: none;">
                        <img style="width: 2rem;height:2rem;margin-top:6%" src="http://172.16.32.194/commonButton/刷新1.png" alt=""  onclick="ResetClick()">
                    </div> 
                 </p>
                 <p class="barright">
                    <img  src="http://172.16.32.194/commonButton/next1.png" alt=""  class="BarBottom" onclick="go_forward();">
                </p>
                <p class="barright">
                    <img  src="http://172.16.32.194/commonButton/prev1.png" alt=""  class="BarBottom" onclick="next_forward();">
                </p>
                <!-- <p class="barright">
                    <img style="width: 3.5rem;height: 1.5rem;margin-top:6%"  src="http://172.16.32.194/commonButton/pass1.png" alt=""  onclick="passclick();">
                </p> -->
        </div>
    </section>
    <!-- 答对一题的提示音 -->
    <audio src="http://172.16.32.194/tipvideo/right0.mp3" id="audioBodyRight0"></audio>
          <!-- 全部答对   -->
<div class="backdrop_bg" id="backdrop_bgright" onclick="hideRightPopup()">
    <audio src="http://172.16.32.194/tipvideo/right1.mp3" id="audioBodyRight"></audio>
        <div class="backdrop_contentGif" >
            <div id="backdrop_text"></div>
        </div>
</div>
<!-- 答错不得分 -->
<div class="backdrop_bg" id="backdropMistake" onclick="hideMistake()">
    <audio src="http://172.16.32.194/tipvideo/error3.mp3" id="audioBodyMistake"></audio>
	<div class="backdrop_contentMistakeGif">
		<div id="backdrop_text">
        </div>
	</div>
</div>
 <!-- 通过 -->
 <div class="backdrop_bg" id="backdropPass">
    <audio src="http://172.16.32.194/commonButton/鼓掌音效.mp3" id="audioBodyPass"></audio>
    <div class="backdrop_contentPasseGif" >
    </div>
</div>
        <div class="menu" id="menu">
            <div class="menu-item" onclick="goto_page(1)">第一关</div>
            <div class="menu-item" onclick="goto_page(2)">第二关</div>
            <div class="menu-item" onclick="goto_page(3)">第三关</div>
            <div class="menu-item" onclick="goto_page(4)">第四关</div>
            <div class="menu-item" onclick="goto_page(5)">第五关</div>
            <div class="menu-item" onclick="goto_page(6)">第六关</div>
            <div class="menu-item" onclick="goto_page(7)">第七关</div>
            <div class="menu-item" onclick="goto_page(8)">第八关</div>
            <div class="menu-item" onclick="goto_page(9)">第九关</div>
            <div class="menu-item" onclick="goto_page(10)">第十关</div>
        </div>
</body>
<script> 
        var token  ="";
        var userid  ="";
        var currentTimestamp = "";
        var operationName = "";
        var additionalInfo = "";
        var groupId ="";
        var scene = "基础";
        var sceneLevel = "高级";
        var courseType = "身份认知";
        var classSort = "10";
        var moodType="";
        var remarks = "";
        var classType = "学习";
        // 倒计时
        apiready = function() { 
      document.getElementById('audioBody').style.display='none'
      document.getElementById('audioBodyRight0').style.display='none'
      document.getElementById('floatingImage1').style.display='none'
      document.getElementById('floatingImage2').style.display='none'
      document.getElementById('floatingImage3').style.display='none'
      document.getElementById('floatingImage4').style.display='none'
      document.getElementById('floatingImage5').style.display='none'
      document.getElementById('floatingImage6').style.display='none'
      token = api.pageParam.token
        userid = api.pageParam.uid
        groupId = api.pageParam.groupId
        currentTimestamp = Date.now()
        operationName = 'ing'
        additionalInfo = ''
        CommonNetWork()
    }
    function passclick(){
        document.querySelectorAll("audio").forEach((audio) => audio.pause());
        setTimeout(()=>{
            api.openWin({
                name: 'IdentitySelect',
                url:'./IdentitySelect.html',
            pageParam: {
                    uid: userid,
                    token:token,
                    groupId:groupId
                },
            reload:true,
        })
        },2)
        currentTimestamp = Date.now()
        operationName = 'ing'
        additionalInfo = ""
        CommonNetWork()
        }
        function go_forward(){
        document.querySelectorAll("audio").forEach((audio) => audio.pause());
        currentTimestamp = Date.now()
        operationName = 'end'
        additionalInfo = ''
        CommonNetWork()
        api.openWin({
                name: 'IdentitySelect',
                url:'./IdentitySelect.html',
            pageParam: {
                    uid: userid,
                    token:token,
                    groupId:groupId
                },
            reload:true,
        })
    }
    function next_forward(){
        document.querySelectorAll("audio").forEach((audio) => audio.pause());
        currentTimestamp = Date.now()
        operationName = 'end'
        additionalInfo = ''
        CommonNetWork()
        api.openWin({
            name: 'IdentityCognition9',
            url:'./IdentityCognition9.html',
            pageParam: {
                    uid: userid,
                    token:token,
                    groupId:groupId
                },
            reload:true,
        })
    }
 function goto_page(number) {
        const pages = [
            "IdentityCognition1",
            "IdentityCognition2",
            "IdentityCognition3",
            "IdentityCognition4",
            "IdentityCognition5",
            "IdentityCognition6",
            "IdentityCognition7",
            "IdentityCognition8",
            "IdentityCognition9",
            "IdentityCognition10",              
        ];

        var name = pages[number-1]
        var url = "./" + name + ".html"
 
        document.querySelectorAll("audio").forEach((audio) => audio.pause());
        currentTimestamp = Date.now();
        operationName = "end";
        additionalInfo = "";
        CommonNetWork();
        api.openWin({
            name: name,
            url: url,
            pageParam: {
                uid: userid,
                token: token,
                groupId: groupId,
            },
            reload: true,
        });
    }
    function toggleMenu() {
        var menu = document.getElementById("menu");
        if (menu.style.display === "none" || menu.style.display === "") {
            menu.style.display = "block";
        } else {
            menu.style.display = "none";
        }
    }
    </script>
</html>